import 'package:bobang/constant.dart';
import 'package:bobang/extension/widget_ext.dart';
import 'package:bobang/pages/home/home_cl.dart';
import 'package:bobang/router.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class HomeView extends GetResponsiveView<HomeController> {
  HomeView({super.key});

  @override
  Widget builder() {
    return CustomScrollView(
      slivers: [
        if (screen.isPhone)
          SliverAppBar(
            centerTitle: true,
            foregroundColor: Colors.white,
            // backgroundColor: Colors.orange,
            // title: const Text(Constant.appName),
            flexibleSpace: FlexibleSpaceBar(
              title: const Text(Constant.appName),
              centerTitle: true,
              collapseMode: CollapseMode.parallax,
              background: Image.network(
                'http://gips3.baidu.com/it/u=4261102772,1669669862&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720',
                fit: BoxFit.cover,
                height: 200,
              ),
            ),
            expandedHeight:
                screen.isPhone ? Get.height * 0.15 : Get.width * 0.15,
            pinned: true,
            // snap: true,
            // floating: true,
          ),
        // const SliverToBoxAdapter(
        //   child: Text('产品'),
        // ),
        if (screen.screenType.index > ScreenType.phone.index)
          Image.network(
            'http://gips3.baidu.com/it/u=4261102772,1669669862&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720',
            fit: BoxFit.fitWidth,
          ).sliverBox,
        SliverPersistentHeader(
          delegate: _TitleDelegate(child: const Text('产品')),
          pinned: true,
          // floating: true,
        ),
        // SliverToBoxAdapter(
        //   child: CarouselView(
        //     itemExtent: null,
        //     children: [],
        //   ),
        // ),
        SliverPadding(
          padding: const EdgeInsets.all(20),
          sliver: SliverGrid.builder(
              itemCount: controller.data.length * 5,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: screen.isPhone ? 2 : (Get.width / 200).toInt(),
                childAspectRatio: 3 / 4,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20,
              ),
              itemBuilder: (_, index) {
                final item = controller.data[index % controller.data.length];
                return Stack(
                  children: [
                    SizedBox.expand(
                      child: Image.network(
                        '${item['img']}',
                        fit: BoxFit.cover,
                      ),
                    ),
                    Positioned(
                      bottom: 0,
                      left: 0,
                      right: 0,
                      child: Container(
                        // height: 50,
                        decoration: const BoxDecoration(
                          color: Colors.black38,
                          // borderRadius: BorderRadius.vertical(top: Radius.circular(10))
                        ),
                        padding: const EdgeInsets.all(8),
                        alignment: Alignment.center,
                        child: Text(
                          '${item['title']}',
                          style: Get.textTheme.bodyMedium?.copyWith(
                            color: Colors.white,
                          ),
                        ),
                      ),
                    )
                  ],
                )
                    .card(
                        color: index % 2 == 0 ? Colors.grey : Colors.blueGrey,
                        alignment: Alignment.center,
                        clipBehavior: Clip.antiAlias)
                    .gesture(onTap: () {
                  Get.toNamed(AppRouter.details);
                });
              }),
        )
      ],
    );
  }
}

class _TitleDelegate extends SliverPersistentHeaderDelegate {
  _TitleDelegate({
    required this.child,
  });

  final Widget child;

  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    return ColoredBox(
      color: Colors.white,
      child: child,
    ).paddingSymmetric(horizontal: 20);
  }

  @override
  double get maxExtent => 20;

  @override
  double get minExtent => 20;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
      this != oldDelegate;
}
